<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue";
import { deleteZoneData } from "@/api/pfmea_data_manage";
import { message } from "@/utils/message";
import { createFormData } from "@pureadmin/utils";
import UploadIcon from "@iconify-icons/ri/upload-2-line";
import { onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import ReCol from "@/components/ReCol";

import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";

// const props = defineProps({
//   base: String
// });
const routeMeta = ref();
const formRef = ref();
const uploadRef = ref();
const validateForm = reactive({
  fileList: [],
  date: "",
  base: "",
  base_zone: "",
  partName: ""
});

const partName_options = [
  {
    value: "N15 FR&N15A FR&N15A RWD",
    label: "N15 FR&N15A FR&N15A RWD"
  },
  {
    value: "N12",
    label: "N12"
  }
];
const base_zone_options = [
  {
    value: "缸体",
    label: "缸体"
  },
  {
    value: "缸盖",
    label: "缸盖"
  },
  {
    value: "曲轴",
    label: "曲轴"
  },
  {
    value: "装配",
    label: "装配"
  }
];
console.log(validateForm);

const myMessage = message => {
  ElMessageBox.alert(message, "结果提示", {
    confirmButtonText: "OK"
  });
};
const deleteForm = formEl => {
  ElMessageBox.confirm("您确定要删除所选区域的数据??", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      if (!formEl) return;
      formEl.validate(valid => {
        if (valid) {
          // 多个 file 在一个接口同时上传
          const formData = createFormData({
            files: validateForm.fileList.map(file => ({ raw: file.raw })), // file 文件
            date: validateForm.date, // 别的字段
            base: validateForm.base,
            base_zone: validateForm.base_zone,
            partName: validateForm.partName
          });
          deleteZoneData(formData)
            .then(data => {
              const data2: any = data;
              myMessage(data2.result_info);
            })
            .catch(error => {
              message(`提交异常 ${error}`, { type: "error" });
            });
        } else {
          return false;
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除取消"
      });
    });
};

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};

// const datekey = ref(Date.now());
// const meta_info = reactive({
//   base: "",
//   base_zone: "",
//   partName: ""
// });

const timestampToYMDHMS = function (timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
  const day = ("0" + date.getDate()).slice(-2);
  const hours = ("0" + date.getHours()).slice(-2);
  const minutes = ("0" + date.getMinutes()).slice(-2);
  const seconds = ("0" + date.getSeconds()).slice(-2);
  return `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
};

// 示例使用
const timestamp = Date.now(); // 或者任何其他的时间戳
const formattedDate = timestampToYMDHMS(timestamp);
console.log(formattedDate); // 输出格式如: "2023-03-10 20-35-15"

const { date, base, base_zone, partName } = toRefs(validateForm);
const route = useRoute();

console.log(base.value);
//实现下拉框默认显示第一个选项
onMounted(() => {
  setTimeout(() => {
    console.log("执行延时任务！");
    base_zone.value = base_zone_options[0].value;
    partName.value = partName_options[0].value;
    date.value = timestampToYMDHMS(timestamp);
  }, 500);
  console.log("form组件挂载了~");

  // partName.value = partName_options[0].value;
});
//监控机型下拉框状态，当选择新的机型时获取响应数据赋值给响应式对象，datekey用于实现当watch触发后重新刷新子组件，避免子组件值没有更新

watch(base_zone, new_base_zone => {
  console.log("区域变化了", new_base_zone);
  base_zone.value = new_base_zone;
  // datekey.value = Date.now();
  console.log(base_zone.value);
});
watch(partName, newpartName => {
  console.log("partName变化了", newpartName);

  routeMeta.value = route.meta;
  base.value = routeMeta.value.base;
  partName.value = newpartName;
  // datekey.value = Date.now();
  console.log(base.value);
  console.log(partName.value);
});
</script>

<template>
  <el-form ref="formRef" :model="validateForm" label-width="82px">
    <el-form-item
      label="所属基地"
      prop="base"
      :rules="[{ required: true, message: '基地不能为空' }]"
    >
      <el-row :gutter="20" justify="space-between">
        <re-col :value="24" :md="12" :xs="24">
          <el-text class="mx-1" size="large">▶当前所属基地：</el-text>
          <el-text tag="mark" class="mx-1" size="large">{{ base }}</el-text>
        </re-col>
      </el-row>
    </el-form-item>
    <el-form-item
      label="区域选择"
      prop="base_zone"
      :rules="[{ required: true, message: '区域选择不能为空' }]"
    >
      <el-row :gutter="20" justify="space-between">
        <re-col :value="24" :md="12" :xs="24">
          <el-text class="mx-1" size="large">▶区域选择：</el-text>
          <el-select
            style="width: 240px"
            clearable
            v-model="validateForm.base_zone"
          >
            <el-option
              v-for="item in base_zone_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </re-col>
      </el-row>
    </el-form-item>

    <el-form-item
      label="机型选择"
      prop="partName"
      :rules="[{ required: true, message: '机型选择不能为空' }]"
    >
      <el-row :gutter="20" justify="space-between">
        <re-col :value="24" :md="12" :xs="24">
          <el-text class="mx-1" size="large">▶机型选择：</el-text>
          <el-select
            style="width: 240px"
            clearable
            v-model="validateForm.partName"
          >
            <el-option
              v-for="item in partName_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </re-col>
      </el-row>
    </el-form-item>
    <el-form-item
      label="日期"
      prop="date"
      :rules="[{ required: true, message: '日期不能为空' }]"
    >
      <el-date-picker
        v-model="validateForm.date"
        type="datetime"
        class="!w-[200px]"
        placeholder="请选择日期时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="danger" text bg @click="deleteForm(formRef)">
        删除
      </el-button>
      <el-button text bg @click="resetForm(formRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
@/api/pfmea_data_manage
